<template>
  <view class="pinia-demo">
    <Header title="Pinia 状态管理示例" />

    <view class="content">
      <!-- 用户状态示例 -->
      <view class="section">
        <view class="section-title">用户状态管理</view>

        <view v-if="!userStore.isLoggedIn" class="login-form">
          <input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            class="input"
          />
          <input
            v-model="loginForm.password"
            placeholder="请输入密码"
            type="password"
            class="input"
          />
          <button @click="handleLogin" class="btn btn-primary">登录</button>
        </view>

        <view v-else class="user-info">
          <view class="info-item">
            <text class="label">用户ID:</text>
            <text class="value">{{ userStore.userInfo.id }}</text>
          </view>
          <view class="info-item">
            <text class="label">用户名:</text>
            <text class="value">{{ userStore.userInfo.username }}</text>
          </view>
          <view class="info-item">
            <text class="label">昵称:</text>
            <text class="value">{{ userStore.userInfo.nickname }}</text>
          </view>
          <button @click="handleLogout" class="btn btn-secondary">
            退出登录
          </button>
          <button @click="updateNickname" class="btn btn-primary">
            更新昵称
          </button>
        </view>
      </view>

      <!-- 应用状态示例 -->
      <view class="section">
        <view class="section-title">应用状态管理</view>

        <view class="app-controls">
          <view class="control-item">
            <text class="label">主题:</text>
            <button
              @click="toggleTheme"
              class="btn"
              :class="appStore.theme === 'dark' ? 'btn-dark' : 'btn-light'"
            >
              {{ appStore.theme === 'dark' ? '🌙 暗色' : '☀️ 亮色' }}
            </button>
          </view>

          <view class="control-item">
            <text class="label">语言:</text>
            <button @click="toggleLanguage" class="btn btn-primary">
              {{ appStore.language === 'zh' ? '中文' : 'English' }}
            </button>
          </view>

          <view class="control-item">
            <text class="label">网络状态:</text>
            <text
              class="status"
              :class="appStore.isOnline ? 'online' : 'offline'"
            >
              {{ appStore.isOnline ? '在线' : '离线' }} ({{
                appStore.networkType
              }})
            </text>
          </view>

          <view class="control-item">
            <text class="label">设备信息:</text>
            <text class="value">{{
              appStore.systemInfo.model || '未获取'
            }}</text>
          </view>
        </view>
      </view>

      <!-- 加载状态示例 -->
      <view class="section">
        <view class="section-title">加载状态示例</view>
        <button @click="simulateLoading" class="btn btn-primary">
          模拟加载 {{ appStore.loading ? '(加载中...)' : '' }}
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useUserStore, useAppStore } from '@/stores/index.js'
import Header from '@/components/Header/Header.vue'

// 使用 stores
const userStore = useUserStore()
const appStore = useAppStore()

// 登录表单
const loginForm = ref({
  username: 'demo',
  password: '123456'
})

// 登录处理
const handleLogin = async () => {
  try {
    await userStore.login(loginForm.value)
    uni.showToast({ title: '登录成功', icon: 'success' })
  } catch (error) {
    uni.showToast({ title: '登录失败', icon: 'error' })
  }
}

// 退出登录
const handleLogout = () => {
  userStore.logout()
  uni.showToast({ title: '已退出登录', icon: 'success' })
}

// 更新昵称
const updateNickname = () => {
  const newNickname = '新昵称-' + Date.now().toString().slice(-4)
  userStore.updateUserInfo({ nickname: newNickname })
  uni.showToast({ title: '昵称已更新', icon: 'success' })
}

// 切换主题
const toggleTheme = () => {
  const newTheme = appStore.theme === 'light' ? 'dark' : 'light'
  appStore.setTheme(newTheme)
  uni.showToast({
    title: `已切换到${newTheme === 'dark' ? '暗色' : '亮色'}主题`,
    icon: 'success'
  })
}

// 切换语言
const toggleLanguage = () => {
  const newLang = appStore.language === 'zh' ? 'en' : 'zh'
  appStore.setLanguage(newLang)
  uni.showToast({ title: `Language changed to ${newLang}`, icon: 'success' })
}

// 模拟加载
const simulateLoading = () => {
  appStore.setLoading(true)
  setTimeout(() => {
    appStore.setLoading(false)
    uni.showToast({ title: '加载完成', icon: 'success' })
  }, 2000)
}

onMounted(() => {
  // 初始化用户信息
  userStore.initUserInfo()
  // 初始化应用设置
  appStore.initAppSettings()
})
</script>

<style lang="scss" scoped>
.pinia-demo {
  min-height: 100vh;
  background: #f5f5f5;
}

.content {
  padding: 20rpx;
}

.section {
  background: white;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    border-bottom: 2rpx solid #eee;
    padding-bottom: 20rpx;
  }
}

.login-form {
  .input {
    width: 100%;
    height: 80rpx;
    border: 2rpx solid #ddd;
    border-radius: 8rpx;
    padding: 0 20rpx;
    margin-bottom: 20rpx;
    font-size: 28rpx;
    box-sizing: border-box;

    &:focus {
      border-color: #007aff;
    }
  }
}

.user-info {
  .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .label {
      font-size: 28rpx;
      color: #666;
      width: 120rpx;
    }

    .value {
      font-size: 28rpx;
      color: #333;
      font-weight: 500;
    }
  }
}

.app-controls {
  .control-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;

    .label {
      font-size: 28rpx;
      color: #666;
    }

    .value {
      font-size: 28rpx;
      color: #333;
    }

    .status {
      font-size: 28rpx;
      padding: 8rpx 16rpx;
      border-radius: 20rpx;

      &.online {
        background: #e8f5e8;
        color: #52c41a;
      }

      &.offline {
        background: #ffe7e7;
        color: #ff4d4f;
      }
    }
  }
}

.btn {
  height: 70rpx;
  border-radius: 8rpx;
  border: none;
  font-size: 28rpx;
  margin: 10rpx 10rpx 10rpx 0;
  padding: 0 30rpx;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  &.btn-primary {
    background: #007aff;
    color: white;
  }

  &.btn-secondary {
    background: #666;
    color: white;
  }

  &.btn-light {
    background: #f0f0f0;
    color: #333;
  }

  &.btn-dark {
    background: #333;
    color: white;
  }

  &:active {
    opacity: 0.8;
  }
}
</style>
